<template>
    <div class="page-container company">
        <!--表格表头-->
        <TableHead
            :config="tableHeaderConfig"
            :searchdata.sync="filters"
            @parentPageList="findPage()"
            :tabinline="tabinline"
            filterId="company"
            v-show="showSearch"
        ></TableHead>
        <!--表格内容栏-->
        <el-card class="card-box" :body-style="{ padding: '12px' }">
            <TableToolBar :showSearch.sync="showSearch" @queryTable="findPage" :columns="columns">
                <el-button type="primary" size="mini" @click="handleItem('add')" icon="el-icon-plus">新增</el-button>
            </TableToolBar>
            <Table
                v-model="pageRequest.pageNum"
                :data="dataList"
                :total="total"
                :columns="columns"
                :loading="loading"
                :isPagination="isPagination"
                :showNo="true"
            >
                <template slot-scope="{ scope }" slot="description">
                    <el-popover trigger="hover" placement="top" popper-class="popper-w">
                        {{ scope.row.description }}
                        <div slot="reference" class="row-des">
                            {{ scope.row.description }}
                        </div>
                    </el-popover>
                </template>
                <template slot="oper" slot-scope="{ scope }">
                    <el-button size="small" type="text" icon="el-icon-edit" @click="handleItem('edit', scope.row)">
                        编辑
                    </el-button>
                </template>
            </Table>
        </el-card>
        <EditItem
            v-model="dialogVisible"
            :data-form="dataForm"
            :dataFormRules="dataFormRules"
            :dialog-config="dialogConfig"
            :dialog-tag="dialogTag"
            @submitForm="submitBefore"
            width="500px"
            ref="editItem"
        >
            <template slot="appIdList">
                <el-select
                    v-model="dataForm.appIdList"
                    placeholder="请选择应用"
                    size="small"
                    multiple
                    style="width: 333px"
                >
                    <el-option
                        v-for="item in appManagerList"
                        :key="item.appId"
                        :label="item.appName"
                        :value="item.id"
                    />
                </el-select>
            </template>
        </EditItem>
    </div>
</template>

<script>
import EditItem from '@/components/EditItem'
import { companyList, fetchAddCompany, fetchEditCompany } from '@/api/system/company.js'
import { confirm } from '@/utils/utils'
import TableToolBar from '@/components/TableToolBar'
import { appManagerPageList } from '@/api/system/application'
import CodeTypeDialogVue from '../../tool/build/CodeTypeDialog.vue'
export default {
    name: 'company',
    components: {
        EditItem,
        TableToolBar
    },
    data() {
        return {
            showSearch: true,
            tabinline: true,
            isPagination: false,
            loading: false,
            size: 'small',
            total: 0,
            // pagelist入参
            pageRequest: { pageNum: 1, pageSize: 50 },
            filters: { companyName: '' },
            tableHeaderConfig: [{ title: '公司名称', code: 'companyName', type: 'input' }],
            // 表格的列参配置
            columns: [
                { prop: 'companyName', label: '公司名称', minWidth: 100, visible: true, key: 0 },
                // { slot: 'isValid', label: '状态', minWidth: 120, align: 'center', visible: true, key: 1 },
                { slot: 'description', label: '公司描述', minWidth: 180, visible: true, key: 2 },
                { type: 'createUser', label: '创建人/创建时间', minWidth: 120, visible: true, key: 3 },
                { type: 'updateUser', label: '更新人/更新时间', minWidth: 100, visible: true, key: 4 },
                {
                    slot: 'oper',
                    label: '操作',
                    minWidth: 120,
                    align: 'center'
                }
            ],
            // 页面list
            dataList: [],
            dialogVisible: false,
            // 新增的入参
            dataFormDefault: {
                id: 0,
                companyName: '',
                description: '',
                appIdList: [],
                isValid: 1
            },
            dataForm: {},
            dialogConfig: [
                { title: '公司名称', code: 'companyName', type: 'input' },
                { title: '应用名称', slot: 'appIdList' },
                { title: '公司描述', code: 'description', type: 'textarea' }
            ],
            dataFormRules: {
                companyName: [
                    {
                        required: true,
                        message: '请输入公司名称',
                        trigger: 'blur'
                    },
                    {
                        min: 2,
                        max: 15,
                        message: '最多可输入15个字符',
                        trigger: 'blur'
                    }
                ],
                description: [
                    {
                        required: false,
                        trigger: 'blur'
                    },
                    {
                        min: 0,
                        max: 20,
                        message: '最多可输入20个字符',
                        trigger: 'blur'
                    }
                ]
            },
            dialogTag: 'add',
            // 应用管理
            appManagerList: [],
            oldManager: []
        }
    },
    mounted() {
        this.findPage()
        this.appManagerPage()
        console.log('mounted')
    },
    activated() {
        this.findPage()
        this.appManagerPage()
        console.log('activated')
    },
    methods: {
        // 获取分页数据
        findPage() {
            this.loading = true
            companyList(this.filters)
                .then(res => {
                    const { data, total } = res
                    this.dataList = data || []
                    this.total = total
                })
                .finally(() => {
                    this.loading = false
                })
        },
        handleItem(tag, item) {
            const { dataFormDefault } = this
            this.oldManager = (item && item.appIdList) || []
            this.dialogTag = tag
            this.dataForm = tag === 'add' ? Object.assign({}, dataFormDefault) : Object.assign({}, item)
            this.dialogVisible = true
        },
        submitBefore(params) {
            const { appManagerList } = this
            const isApp = []
            this.oldManager.map((item, index) => {
                if (!params.appIdList.includes(item)) {
                    isApp.push(item)
                }
            })
            console.log('isapp', isApp)
            const tipApp = []
            if (isApp.length > 0) {
                isApp.map((item, index) => {
                    appManagerList.find(items => {
                        if (items.id == item) {
                            tipApp.push(items.appName)
                        }
                    })
                })
                console.log(tipApp)
                const tipAppStr =
                    ' 删除“' + tipApp.splice(',') + '”应用后，公司下用户将无此应用下的菜单权限，确认要删除吗？'
                confirm(tipAppStr).then(() => {
                    this.submitForm(params)
                })
            } else {
                this.submitForm(params)
            }
        },
        submitForm(params) {
            const { dialogTag } = this
            const fetchApi = dialogTag === 'add' ? fetchAddCompany : fetchEditCompany
            fetchApi(params).then(res => {
                this.$message.success('提交成功')
                this.findPage()
                this.$refs.editItem.closeDialog()
            })
        },

        handleEnable(row) {
            const { isValid } = row
            const tip = row.isValid == 1 ? '确认启用选中记录吗？' : '确认禁用选中记录吗？'
            confirm(tip).then(() => {
                const parpans = Object.assign({}, row, {
                    isValid
                })
                fetchEditCompany(parpans).then(res => {
                    this.$message.success('操作成功')
                    this.findPage()
                })
            })
        },
        // 应用列表
        appManagerPage() {
            appManagerPageList({ isValid: 1 }).then(res => {
                console.log('res', res)
                this.appManagerList = res.data
            })
        }
    }
}
</script>

<style>
.row-des {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.popper-w {
    max-width: 400px !important;
}
</style>
